$var-primary-loading:rgba(255,255,255,1);
$var-danger-loading: rgba(255,87,35,1);
$var-danger-loading-bg: #fff;

@mixin iBackground($background) {
  @if $background == $var-danger-loading {
    background: $var-danger-loading
  } @else {
    background: $var-primary-loading
  }
}

@mixin loadingStyle {
  text-align: center;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  display:flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
  transform: translate(0,-10%);
  i {
    @include iBackground($var-primary-loading);
  }
  .ant-spin-text {
    color: $var-primary-loading
  }
  .ant-spin-text {
    margin-left: 20px;
    font-size: 14px;
  }
}

.loading {
  @include loadingStyle;
  &.danger {
    background:$var-danger-loading-bg;
    i {
      @include iBackground($var-danger-loading);
    }
    .ant-spin-text {
      color: $var-danger-loading
    }
  }
}
